<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">


<html>
<head>
	<meta http-equiv="Content-type" content="text/html; charset=utf-8">
	<title>LiquidGear</title>
	<style type="text/css" media="screen">@import "css/jqtouch.css";</style>
	<style type="text/css" media="screen">@import "css/theme.css";</style>
    
	<script src="js/jquery.1.3.2.js" type="text/javascript" charset="utf-8"></script>
	<script src="js/jqtouch.js" type="application/x-javascript" charset="utf-8"></script>
	<script type="text/javascript" charset="utf-8" src="js/lg_iphone.js"></script>
	<script type="text/javascript" charset="utf-8" src="js/lg_jqtouch.js"></script>
	
	<script type="text/javascript" charset="utf-8">
	//This will call your init function when everything is loaded
	lg.bind('lg_init_jqtouch', initJQTouch);
	
	function initJQTouch(){
		lg.pref.scroll	= true;
		
		lg.navigation.show({barStyle:1, tintColor:"black", translucent:"true"});
		lg.jqtouch.addNav('home');

		// Show a swipe event on swipe test
		$('.swipe').addTouchHandlers().bind('swipe', function(evt, data){                
				lg.notify.alert('Swiped '+ data.direction +' on #' + $(evt.currentTarget).attr('id') + '.');
		});

		$('a[target="_blank"]').click(function(){
				if(confirm('This link opens in a new window.')) {
						return true;
				} else {
						$(this).removeClass('active');
						return false;
				}
		});
		
		// Page transition callback events
		$('#pageevents').
				bind('pageTransitionStart', function(e, info) {
						$(this).find('.info').append('Started transitioning ' + info.direction + '&hellip; ');
				}).
				bind('pageTransitionEnd', function(e, info) {
						$(this).find('.info').append(' finished transitioning ' + info.direction + '.<br /><br />');
				});
				
		// Orientation callback event
		$('body').bind('turn', function(e, data) {
				lg.notify.alert('Orientation: ' + data.orientation);
		})
		
		$('#throbber').click(function(e) {
			//e.preventDefault();
			
			if(lg.throbber.active) {
				lg.throbber.hide();
			} else {
				lg.throbber.show();
			}
			return false;
		});
		
		$('#dismissKeyboard').keypress(function(e){
			//Type "g" to dismiss the keyboard
			if(e.keyCode == 103) {
				$(this).blur();
			}
		});
	}
	</script>
</head>

<body id="stage">
    <div id="home">
        <div class="toolbar">
            <h1>LiquidGear</h1>
            <a class="back" href="#home">Home</a>
        </div>
        
        <h2>About</h2>
        <ul>
            <li class="arrow"><a href="#aboutLG">LiquidGear</a></li>
            <li class="arrow"><a href="#aboutJQ">jQTouch</a></li>
        </ul>
        
        <h2>Features</h2>
        <ul>
            <li class="arrow"><a href="#nativeui">Native Interface</a> <small class="counter">1</small></li>
            <li class="arrow"><a href="#cssui">CSS Interface</a> <small class="counter">5</small></li>
            <li class="arrow"><a href="#callbacks">Callback Events</a> <small class="counter">3</small></li>
            <li class="arrow"><a href="#demos">Demos</a> <small class="counter">2</small></li>
        </ul>
        
        <h2>External Links</h2>
        <ul>
            <li class="forward"><a href="http://www.liquidgear.net/" target="_blank">Homepage</a></li>
            <li class="forward"><a href="http://liquidgear.googlecode.com" target="_blank">Google Code</a></li>
        </ul>

        
        <ul class="individual">
        	<li><a href="&#109;&#097;&#105;&#108;&#116;&#111;:&#100;&#107;&#064;&#109;&#111;&#114;&#102;&#117;&#110;&#107;&#046;&#099;&#111;&#109;" target="_blank">Email</a></li>
        	<li><a href="http://www.liquidgear.net/?page_id=182" target="_blank">Donate</a></li>
        </ul>
        
        <div class="info">
            <p>Add this page to your home screen to view the custom icon, startup screen, and full screen mode.</p>
        </div>
    </div>
    
    <div id="callbacks">
        <div class="toolbar">
            <h1>Events</h1>
            <a class="back" href="#home">Home</a>
        </div>
        <ul>
            <li><a href="#pageevents">Page events</a></li>
            <li id="swipeme">Swipe me!</li>
            <li id="orient">Orientation: <strong>profile</strong></li>
        </ul>
    </div>
    
    <div id="demos">
        <div class="toolbar">
            <h1>Demos</h1>
            <a class="back" href="#home">Home</a>
        </div>
        <div class="info">
            These apps open in a new window. Don&#8217;t forget to save them to your home screen to enable full-screen mode.
        </div>
        <ul>
            <li class="forward"><a target="_blank" href="../todo/">To do app</a></li>
            <li class="forward"><a target="_blank" href="../clock/">Clock app</a></li>
        </ul>
    </div>
    
    <div id="pageevents">
        <div class="toolbar">
            <h1>Page Events</h1>
            <a class="back" href="#home">Events</a>
        </div>
        <div class="info" style="font-weight: normal;">
            
        </div>
    </div>
    
    <div id="aboutLG">        
			<p><img src="jqtouch.png" /></p>
			<p><strong>LiquidGear</strong><br />Version 1.0 beta<br />
				<a href="http://www.nitrogendesign.com">By Nitrogen Design</a></p>
			<p></p>
			<p><br /><br /><a href="#" class="grayButton goback">Close</a></p>
    </div>

    <div id="aboutJQ">        
			<p><img src="jqtouch.png" /></p>
			<p><strong>jQTouch</strong><br />Version 1.0 beta<br />
				<a href="http://www.davidkaneda.com">By David Kaneda</a></p>
			<p><em>Create powerful mobile apps with<br /> just HTML, CSS, and jQuery.</em></p>

			<p>
				<a href="#">@jQTouch on Twitter</a>
			</p>
			<p><br /><br /><a href="#" class="grayButton goback">Close</a></p>
    </div>

    <div id="ajax">
        <div class="toolbar">
            <h1>AJAX</h1>
            <a class="back" href="#home">Home</a>
        </div>
        <ul>
            <li class="arrow"><a href="#ajax_post">POST Form Example</a></li>
            <li class="arrow"><a href="ajax.html">GET Example</a></li>
            <li class="arrow"><a href="#callback">With Callback</a></li>
        </ul>
    </div>
    
    <div id="flipdemo">
            <div style="font-size: 1.5em; text-align: center; margin: 160px 0 160px; font-family: Marker felt;">
                Pretty smooth, eh?            
            </div>
            <a style="margin:0 10px;color:rgba(0,0,0,.9)" href="#" class="whiteButton goback">Go back</a>
    </div>

    <form id="ajax_post" action="ajax_post.php" method="POST" class="form">
        <div class="toolbar">
            <h1>Post Demo</h1>
            <a class="back" href="#">Ajax</a>
        </div>
            <ul>
                <li>
                    <input type="text" name="zip" value="" placeholder="Zip Code" />
                </li>
            </ul>
            <a style="margin:0 10px;color:rgba(0,0,0,.9)" href="#" class="submit whiteButton">Submit</a>
    </form>
    
    <div id="callback">
        <div class="toolbar">
            <h1>AJAX w/Callback</h1>
            <a class="back" href="#">Ajax</a>
        </div>
    </div>
    
    <div id="nativeui">
        <div class="toolbar">
            <h1>Native UI Demos</h1>
            <a class="back" href="#">Home</a>
        </div>
        
        <h2>Throbber</h2>
        <ul>
            <li><a id="throbber" href="#">Show/Hide Throbber</a></li>
        </ul>
    </div>
		
    <div id="cssui">
        <div class="toolbar">
            <h1>CSS UI Demos</h1>
            <a class="back" href="#">Home</a>
        </div>
        
        <h2>Animation</h2>
        <ul>
            <li><a class="flip" href="#flipdemo">Page Flip</a></li>
        </ul>
        <h2>Lists</h2>
        <ul>
            <li class="arrow"><a href="#edge">Edge to Edge</a></li>
            <li class="arrow"><a href="#plastic">Plastic</a></li>
            <li class="arrow"><a href="#metal">Metal</a></li>
        </ul>
        <h2>Forms</h2>
        <ul>
            <li class="arrow"><a href="#forms">Forms</a></li>
        </ul>
    </div>

    <div id="edge" class="edgetoedge">
    	<div class="toolbar">
    		<h1>Edge to Edge</h1>
    		<a href="#" class="back">Back</a>
    	</div>

        <h4>E</h4>

        <ul>
        	<li><a href="#">Elea <em>Peliche</em></a></li>
        	<li>Elizabeth <em>Nogales</em></li>
        	<li><small>Es mi hermano</small> <a href="#">Emiliano <em>Martín Lafuente</em></a></li>
        	<li><a href="#">Enrique <em>Dans</em></a></li>
        	<li><a href="#">Ernesto <em>González Aro…</em></a></li>
        </ul>

        <h4>F</h4>

        <ul>
        	<li><a href="#">Fernández <em>Cols Aleix</em></a></li>
        	<li><a href="#">Fernández <em>Dominguez Alex</em></a></li>
        	<li><a href="#">Flavia <em>Olmedo</em></a></li>
        	<li><a href="#">Francesc <em>Esplugas</em></a></li>
        	<li><a href="#">Francisco <em>Perez Garzón</em></a></li>
        </ul>

        <h4>Optional List</h4>

        <ul>	
        	<li><small>It's free</small> <a href="#" class="arrow">Label + minilabel</a></li>
        	<li><a href="#" class="arrow">Only arrow</a></li>
        	<li><small>✔</small> Only labels</li>
        	<li><small>☆</small> <a href="#">Only labels</a></li>
        	<li><small>★</small> <a href="#">Only labels</a></li>
        </ul>
        
    </div>
    
    <div id="plastic" class="plastic">
        <div class="toolbar">
    		<h1>Plastic Lists</h1>
    		<a href="#" class="back">Back</a>
    	</div>
    	<ul>
    		<li class="arrow"><small>2,99€</small> <a href="#">Simple list</a></li>
    		<li class="arrow"><small>Free</small> <a href="#">Contact list</a></li>
    		<li class="arrow"><small>Open Source</small> <a href="#">Content List</a></li>
    		<li class="arrow"><small>35€</small> <a href="#">Metal list</a></li>
    		<li><a href="normal-metal.html">Metal list</a></li>
    		<li class="arrow"><a href="normal-content.html">Content List</a></li>
    		<li><a href="#">Download</a></li>
    	</ul>
        <div class="info">
            <p><strong>Best enjoyed on a real iPhone</strong></p>
        </div>
    </div>
    
    <div id="metal" class="metal">
        <div class="toolbar">
    		<h1>Metal Lists</h1>
    		<a href="#" class="back">Back</a>
    	</div>
    	<ul>	
        	<li class="arrow"><a href="#"><small>AM</small> 9:40 <em>Buenos Aires</em></a></li>
        	<li class="arrow"><a href="#"><small>PM</small> 19:40 <em>Singapur</em></a></li>
        	<li><a href="#"><small>PM</small> 22:40 <em>Japan</em></a></li>
        	<li class="arrow"><a href="#">11:40 <em>New York</em></a></li>
        	<li class="arrow"><a href="#">9:40 <em>Ontario</em></a></li>
        </ul>
    </div>
    
    <div id="forms">
        <div class="toolbar">
    		<h1>Forms</h1>
    		<a href="#" class="back">Back</a>
    	</div>
        <form>
            <ul class="edit">
            	<li><input type="text" name="name" placeholder="Text" id="some_name" /></li>
            	<li><input type="text" name="search" placeholder="Search" id="some_name" /></li>
            	<li><input type="text" name="phone" placeholder="Phone" id="some_name"  /></li>
            	<li><input type="text" name="zip" placeholder="Numbers" id="some_name" /></li>		 	
            	<li><textarea id="dismissKeyboard">Textarea</textarea></li>
                <li>Sample Toggle <span class="toggle"><input type="checkbox" /></span></li>
            	<li><select id="lol"><optgroup label="Swedish Cars">
            	<option value ="volvo">Volvo</option>
            	<option value ="saab">Saab</option>
            	</optgroup>
            	<optgroup label="German Cars">
            	<option value ="mercedes">Mercedes</option>
            	<option value ="audi">Audi</option>
            	</optgroup></select></li>
            	<li><input type="password" name="some_name" value="iphonedelcopon" id="some_name" /></li>
            	<li><input type="checkbox" name="some_name" value="Hello" id="some_name" title="V8 Engine Type" /></li>
            	<li><input type="checkbox" name="some_name" value="Hello" checked="checked" id="some_name" title="V12 Engine Type" /></li>
            	<li><input type="radio" name="some_name" value="Hello" id="some_name" title="Only cars" /></li>
            	<li><input type="radio" name="some_name" value="Hello" id="some_name" title="Only motorbikes" /></li>
            </ul>
        </form>
    </div>
</body>
</html>